<template>
	<view class="content">
		<view class="zhezhao" v-if="show"></view>
		<view class="main">
			<view class="nav-item">
				<view class="item-list" @click="toshow(item,1,index)" v-for="(item,index) in list" :key="item.trade_id">
					<image :src="item.logo" mode="aspectFit" class="ic"></image>
					<view class="item-text">{{item.name}}</view>
					<u-icon name="arrow-right" color="#BBBBBB" size="28"></u-icon>
				</view>
			</view>
		</view>
		<!-- 	 -->
		<u-popup v-model="show" mode="bottom" border-radius="14">
			<view class="card-t">
				<view class="txt1" @click="topage">
					从服务器删除
				</view>
				<view class="txt1" @click="react">
					重置
				</view>
				<view class="btn-bottom" @click="quxiao">
					取消
				</view>
			</view>
		</u-popup>
		<u-modal v-model="del" content="确定要删除吗？" show-cancel-button @confirm="DelItem"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				page:1,
				list:[],
				id:'',
				index:'',
				member_trade:[],
				del:false,
			}
		},
		onShow() {
			try {
			    const userInfo = uni.getStorageSync('userInfo');
			    if (userInfo) {
			        console.log('当前数据------',userInfo);
					this.member_trade = userInfo.member_trade
			    }
			} catch (e) {
			    // error
			}
			
			this.page=1
			console.log('当前page-------------',this.page)
			this.getlist(this.page)
		},
		onLoad(e){
			
		},
		onPullDownRefresh() {
			this.page=1
		    this.getlist(this.page)
		},
		methods: {
			// 删除
			DelItem(){
				this.$http({
					url:this.$api.bindTrade+'/'+this.id,
					method:'DELETE',
					hideLoading:true,
					debug:false,
					data:{
						id:this.id
					},
					success:res=>{
						console.log('删除接口返回----------',res)
						if(res.code==201){
							uni.showToast({
							    title: res.msg,
							    duration: 2000,
								icon:'none'
							});
							this.list[this.index].isbuy = false
						}
						
					},complete:e=>{
						uni.hideLoading();
					}
				})
			},
			// 获取列表
			getlist(e){
				this.$http({
					url:this.$api.bindTrade,
					method:'GET',
					hideLoading:true,
					data:{
						now_page:e
					},
					success:res=>{
						console.log('交易所接口返回----------',res)
						console.log('当前购买---------',this.member_trade)
						res.data.list = res.data.list.map(item=>{
							item.isbuy = false
							this.member_trade.forEach(i=>{
								if(i.trade_id){
									if(item.trade_id ==i.trade_id){
										item.isbuy =true
									}
								}
							})
							return item
						})
						if(this.page == 1){
							this.list = []
						}
						console.log('当前list-------------',this.list)
						if(res.data.list.length>0){
							this.list = this.list.concat(res.data.list)
							this.page+=1
							this.getlist(this.page)
							
						}
					},
					fail:err=>{
						
					},complete:e=>{
						uni.hideLoading();
					}
				})
			},
			// 重置
			react(){
				uni.navigateTo({
					url: `/pages/Mine/addapi/addapi?id=${this.id}&type=2`
				})
			},
			//点击列表项
			toshow(e,type,index) {
				console.log('当前点击-----------',e)
				this.id = e.trade_id
				this.index = index
				if(e.isbuy){
					this.show = true
					return
				}
				uni.navigateTo({
					url: `/pages/Mine/addapi/addapi?id=${e.trade_id}&type=1`
				})
			},
			quxiao() {
				this.show = false
			},
			topage() {
				this.del = true
			}
		}
	}
</script>

<style scoped>
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #f8f8f8;
		min-height: 100vh;
	}

	.zhezhao {
		position: fixed;
		width: 100%;
		height: 100%;
		background: #00000080;
		top: 0;
		z-index: 9;
	}

	.ic {
		height: 50rpx;
		width: 50rpx;
		border-radius: 100%;
	}

	.nav-item {
		margin-top: 10rpx;
	}

	.item-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 694rpx;
		margin: 25rpx auto;
		background: #ffffff;
		padding: 34rpx 28rpx;
		border-radius: 15rpx;
	}

	.item-text {
		text-align: left;
		flex: 1;
		margin-left: 14rpx;
	}

	.card-t {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 28rpx;
	}

	.txt1 {
		width: 100%;
		padding: 0 28rpx;
		text-align: center;
		height: 104rpx;
		line-height: 104rpx;
		font-size: 28rpx;
		font-weight: 600;
		color: #222222;
		border-bottom: 1px solid #f8f5f5;
	}

	.btn-bottom {
		width: 694rpx;
		height: 80rpx;
		background: #2F73FD;
		box-shadow: 0px 4px 8px 0px rgba(166, 196, 255, 1);
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 32rpx;
		margin-top: 50rpx;
	}
</style>
